import {$$message, PlButton, PlCascade, PlCheckbox, PlCheckboxGroup, PlColorPicker, PlDate, PlForm, PlFormItem, PlIcon, PlInput, PlNumber, PlRadio, PlRadioGroup, PlRate, PlSelect, PlSelectOption, PlSlider, PlTagInput, PlTime, PlToggle, PlTooltip} from "plain-design";
import {reactive, useRefs} from "plain-design-composition";
import React from "react";
import {designProPage} from "../designProPage";

export default designProPage(() => {

    const {refs, onRef} = useRefs({
        form: PlForm
    })

    const state = reactive({
        formData: {} as any,
    })

    const levelData = [
        {levelName: '一级', code: '1'},
        {levelName: '二级', code: '2'},
        {levelName: '三级', code: '3'},
    ]
    const treeData = [
        {
            id: '1',
            name: '一级 1',
            subs: [
                ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
                    id: '1-' + index,
                    name: '二级 1-' + index,
                    subs: [{
                        id: `1-${index}-1`,
                        name: `三级 1-${index}-1`
                    }]
                })))
            ]
        }, {
            id: '2',
            name: '一级 2',
            subs: [
                ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
                    id: '2-' + index,
                    name: '二级 2-' + index,
                    subs: [{
                        id: `2-${index}-1`,
                        name: `三级 2-${index}-1`
                    }]
                })))
            ]
        }, {
            id: '3',
            name: '一级 3',
            subs: [{
                id: '3-1',
                name: '二级 3-1',
                subs: [{
                    id: '3-1-1',
                    name: '三级 3-1-1'
                }, {
                    id: '3-1-2',
                    name: '三级 3-1-2'
                }]
            }, {
                id: '3-2',
                name: '二级 3-2',
                subs: [{
                    id: '3-2-1',
                    name: '三级 3-2-1'
                }]
            }]
        }]

    async function saveValidate() {
        await refs.form!.validate()
        $$message.success('校验通过')
    }

    return () => <>
        <div className="pro-page-header">
            <h1>基础表单</h1>
            <p>
                表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景，以下是常见的一些表单组件。
                <PlButton mode="text" label="查看当前页面代码" onClick={() => window.open("https://gitee.com/martsforever-demo/template-plain-react-micro-base/blob/master/pages/form/basic-form.tsx")}/>
            </p>
        </div>
        <div className="pro-page-card">
            <PlForm ref={onRef.form} modelValue={state.formData} centerWhenSingleColumn>
                <PlFormItem label={'普通文本框'} field={'field1'} required>
                    <PlInput v-model={state.formData.field1} placeholder={'请输入文本'}/>
                </PlFormItem>
                <PlFormItem label={'普通文本域'} field={'field2'} required>
                    <PlInput v-model={state.formData.field2} textarea placeholder={'请输入文本域'}/>
                </PlFormItem>
                <PlFormItem label={'数字框'} field={'field3'} rules={{type: 'number', max: 100, message: '最大值100'}} required>
                    {{
                        default: <PlNumber v-model={state.formData.field3} block placeholder={'请输入数字'}/>,
                        suffix: <PlTooltip title={'提示'}><PlIcon icon={'el-icon-question'} style={{marginLeft:'8px'}}/></PlTooltip>,
                    }}
                </PlFormItem>
                <PlFormItem label={'复选框'} field={'field5'} rules={{min: 1, max: 3, type: 'array', message: '1-3个元素'}} required>
                    <PlCheckboxGroup v-model={state.formData.field5} itemWidth={'50%'}>
                        <PlCheckbox checkboxForAll label="全部"/>
                        <PlCheckbox label="大客户" val="large"/>
                        <PlCheckbox label="潜在客户" val="potential"/>
                        <PlCheckbox label="长久客户" val="long"/>
                        <PlCheckbox label="赢单客户" val="order"/>
                    </PlCheckboxGroup>
                </PlFormItem>
                <PlFormItem label={'下拉选项'} field={'field6'} required rules={{message: '只能选择二级', type: 'enum', enum: ['2']}}>
                    <PlSelect v-model={state.formData.field6} placeholder={'请选择'}>
                        {levelData.map(item => <PlSelectOption label={item.levelName} val={item.code} key={item.code}/>)}
                    </PlSelect>
                </PlFormItem>
                <PlFormItem label={'下拉选项（多选）'} field={'field62'} required rules={{required: true, type: 'array', min: 1, message: '最少选择一项'}}>
                    <PlSelect v-model={state.formData.field62} placeholder={'请选择'} multiple>
                        {levelData.map(item => <PlSelectOption label={item.levelName} val={item.code} key={item.code}/>)}
                    </PlSelect>
                </PlFormItem>
                <PlFormItem label={'级联选择'} field={'field61'} rules={{required: true, message: '不能为空'}}>
                    <PlCascade
                        placeholder={'请选择'}
                        v-model={state.formData.field61}
                        data={treeData}
                        labelField={'name'}
                        keyField={'id'}
                        childrenField={'subs'}
                    />
                </PlFormItem>
                <PlFormItem label={'单选按钮'} field={'field9'} required>
                    <PlRadioGroup v-model={state.formData.field9} itemWidth="33%">
                        <PlRadio label="是" val="Y"/>
                        <PlRadio label="否" val="N"/>
                        <PlRadio label="未知" val="NO"/>
                    </PlRadioGroup>
                </PlFormItem>
                <PlFormItem label={'开关按钮'} field={'field10'} rules={{message: '请阅读并同意使用协议', type: 'enum', enum: [true]}}>
                    <PlToggle v-model={state.formData.field10}/>
                </PlFormItem>
                <PlFormItem label={'滑块'} field={'field11'} required rules={{min: 50, type: 'number', message: '最小值50'}}>
                    <PlSlider v-model={state.formData.field11}/>
                </PlFormItem>
                <PlFormItem label={'标签输入框'} field={'field12'} required rules={[{min: 3, type: 'array', message: '最少输入3个标签'}, {max: 5, type: 'array', message: '最多5个标签'}]}>
                    <PlTagInput v-model={state.formData.field12} placeholder={'请选择'}/>
                </PlFormItem>
                <PlFormItem label={'评分'} field={'field13'} required rules={{min: 1, type: 'number', message: '最低1分'}}>
                    <PlRate v-model={state.formData.field13}/>
                </PlFormItem>
                <PlFormItem label={'颜色选择器'} field={'field14'} rules={{required: true, message: '颜色不能为空'}}>
                    <PlColorPicker v-model={state.formData.field14} placeholder={'请选择'}/>
                </PlFormItem>
                <PlFormItem label={'时间选择'} field={'field15'} required>
                    <PlTime v-model={state.formData.field15} placeholder={'请选择'}/>
                </PlFormItem>
                <PlFormItem label={'时间范围选择'} field={['field17', 'field18']} required>
                    <PlTime v-model-start={state.formData.field17} v-model-end={state.formData.field18} range placeholder={'请选择'}/>
                </PlFormItem>
                <PlFormItem label={'日期时间选择'} field={'field19'} required>
                    <PlDate v-model={state.formData.field19} datetime placeholder={'请选择'}/>
                </PlFormItem>
                <PlFormItem label={'日期时间范围选择'} field={['field20', 'field21']} required>
                    <PlDate v-model-start={state.formData.field20} v-model-end={state.formData.field21} range datetime placeholder={'请选择'}/>
                </PlFormItem>
                <PlFormItem label="文本域" field="field22" required>
                    <PlInput textarea v-model={state.formData.field22}/>
                </PlFormItem>
                <PlFormItem contentAlign={'center'}>
                    <PlButton label={'校验'} onClick={saveValidate}/>
                    <PlButton label={'取消校验'} mode={'stroke'} onClick={() => refs.form!.clearValidate()}/>
                </PlFormItem>
            </PlForm>
        </div>
    </>
})
